<template>
	<view :style="[navbarOuterStyle]" class="e-navbar-template" :class="{ center: isCenter }">
		<view :style="[navFixedStyle]" :class="{ 'border-bottom': border }" class="e-navbar-fixed">
			<view v-if="isStatusBar" :style="{ height: statusBarHeight + 'px' }" class="status-bar"></view>
			<view :style="[navbarInnerStyle]" class="e-navbar">
				<view class="e-navbar_left e-navbar_item">
					<template v-if="leftArrow">
						<view v-if="$slots.left">
							<slot name="left" />
						</view>
						<view @click="back(backDelta)" v-else class="e-navbar_back">
							<text v-if="leftText">{{ leftText }}</text>
						</view>
					</template>
				</view>

				<view v-if="$slots.center" class="e-navbar_center">
					<slot name="center" />
				</view>
				<template v-else>
					<view v-if="$slots.title" :style="[navTitleStyle]" class="e-navbar_title e-navbar_item">
						<slot name="title"></slot>
					</view>
					<view v-else-if="title" :style="[navTitleStyle]" class="e-navbar_title e-navbar_item">
						<view class="e-line-1">{{ title }}</view>
					</view>
				</template>

				<view class="e-navbar_right e-navbar_item" @click="rightClick">
					<template v-if="$slots.right">
						<slot name="right" />
					</template>
					<text v-else-if="rightText">{{ rightText }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getSystemInfo } from '@/utils';

// 获取系统状态栏的高度
const systemInfo = getSystemInfo();
let menuButtonInfo = {};

// #ifdef MP-WEIXIN
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif

export default {
	name: 'eNavbar',

	props: {
		// 高度
		height: Number,
		// 左右两边 padding
		padding: {
			type: Number,
			default: 20
		},
		isStatusBar: {
			type: Boolean,
			default: true
		},
		// 标题
		title: String,
		// 是否展示左侧返回按钮
		leftArrow: {
			type: Boolean,
			default: true
		},
		leftText: String,
		rightText: String,
		fixed: {
			type: Boolean,
			default: true
		},
		zIndex: {
			type: Number,
			default: 200
		},
		// 是否开启透明导航栏
		transparent: {
			type: Boolean,
			default: false
		},

		// 背景色
		rgb: {
			type: String,
			default: '255, 255, 255'
		},
		// 页面滚动距离
		scrollTop: Number,
		// 开启沉侵式
		immerse: {
			type: Boolean,
			default: false
		},
		// 返回层级
		backDelta: {
			type: Number,
			default: 1
		},
		isAddBar: {
			type: Boolean,
			default: true
		},
		titleWidth: {
			type: Number,
			default: 400
		},
		border: Boolean,
		// 默认返回按钮颜色
		defaultBackColor: {
			type: String,
			default: '#fff'
		},
		// 渐变后返回按钮的颜色
		transparentBackColor: {
			type: String,
			default: '#333'
		},

		background: {
			type: String,
			default: ''
		},

		offsetTop: {
			type: Number,
			default: 0
		},
		iswxP: {
			type: Boolean,
			default: true
		},
		//  是否上下居中
		isCenter: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			statusBarHeight: systemInfo.statusBarHeight
		};
	},
	watch: {
		opacity(n, o) {
			if (n <= 0) {
				this.$emit('change', 0);
			} else if (n >= 1) {
				this.$emit('change', 1);
			} else if (n !== o) {
				this.$emit('change', n);
			}
		}
	},
	computed: {
		// 导航栏标题宽度
		navTitleWidth() {
			let { titleWidth, padding } = this;
			let maxWidth = 0;
			// #ifdef MP
			let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
			maxWidth = systemInfo.windowWidth - rightButtonWidth * 2;
			// #endif
			// #ifndef MP
			maxWidth = systemInfo.windowWidth - 120;
			// #endif

			if (maxWidth && uni.upx2px(titleWidth) > maxWidth) {
				return maxWidth - uni.upx2px(padding) * 2 + 'px';
			}

			return uni.upx2px(titleWidth) - uni.upx2px(padding) * 2 + 'px';
		},
		navTitleStyle() {
			const { navTitleWidth, transparent, opacity } = this;
			return { width: navTitleWidth, opacity: transparent ? opacity : 1 };
		},

		// 固定样式
		navFixedStyle() {
			const { fixed, transparent, background, rgb, opacity, offsetTop } = this;
			let style = {
				left: 0,
				right: 0
			};
			style.position = fixed ? 'fixed' : 'relative';

			style.background = transparent ? `${rgb}` : background || `${rgb}`;
			style.top = offsetTop + 'px';

			return style;
		},

		// 导航栏外部盒子的样式
		navbarOuterStyle() {
			const { statusBarHeight, navbarHeight, zIndex, immerse } = this;
			let style = {};
			let height = 0;
			if (this.isAddBar) {
				height = statusBarHeight + navbarHeight;
			} else {
				height = navbarHeight;
			}
			style.height = immerse ? 0 : height + 'px';
			style.zIndex = zIndex;
			return style;
		},
		opacity() {
			const { statusBarHeight, navbarHeight, scrollTop, transparent } = this;
			const navAllHeight = statusBarHeight + navbarHeight;
			return transparent ? scrollTop / navAllHeight : 1;
		},
		// 导航栏内部盒子的样式
		navbarInnerStyle() {
			const { padding, fixed } = this;
			let style = {};
			style.height = this.navbarHeight + 'px';
			style.paddingLeft = uni.upx2px(padding) + 'px';
			// #ifdef MP
			let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
			// 小程序，导航栏内部的宽度需要减少右边胶囊的宽度
			if (this.iswxP) {
				style.paddingRight = rightButtonWidth + uni.upx2px(padding) + 'px';
			} else {
				style.paddingRight = uni.upx2px(padding) + 'px';
			}
			// #endif
			// #ifndef MP
			style.paddingRight = uni.upx2px(padding) + 'px';
			// #endif
			return style;
		},
		// 导航栏高度
		navbarHeight() {
			const { height } = this;
			// #ifdef APP-PLUS || H5
			return height ? height : 44;
			// #endif

			/* eslint-disable */
			// #ifdef MP
			let mpHeight = systemInfo.platform == 'ios' ? 44 : 48;
			// let mpHeight = menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2
			return height ? height : mpHeight;
			// #endif
			/* eslint endable */
		}
	},
	methods: {
		rightClick() {
			this.$emit('rightClick');
		},
		back(delta = 1) {
			// #ifdef MP-WEIXIN
			// const status = backFunction(this.$parent.from || this.$parent.fromid || '')
			// if (!status) {
			// 	return
			// }
			// #endif
			//   const pages = getCurrentPages().length
			//   if (pages <= 1) {
			//     return uni.switchTab({
			//       url: '/pages/tabBar/home'
			//     })
			//   }
			//   uni.navigateBack({ delta })
		}
	}
};
</script>

<style lang="scss" scoped>
.e-navbar-template {
	position: relative;
}
.center {
	display: flex;
	align-items: center;
}
.e-navbar-fixed {
	width: 100%;
	top: 0;
}
.e-navbar {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	box-sizing: border-box;

	&_back {
		position: relative;
		&-icon {
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	&_item {
		height: 100%;
		display: flex;
		align-items: center;
	}

	&_title {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		justify-content: center;
		font-weight: bold;
		font-size: 16px;
		color: #1f1f1f;
	}

	&_center {
		flex: 1;
		overflow: hidden;
	}

	&_left {
		flex-shrink: 0;
		justify-content: flex-start;
	}

	&_right {
		flex-shrink: 0;
		justify-content: flex-end;
		font-size: 14px;
		color: #464c58;
	}
}

.status-bar {
	width: 100%;
	// height: var(--status-bar-height);
}

.e-line-1 {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>
